<template>
  <div>
      <el-card class="box-card">
          <div class="name">
              <div class="num">
                  <b>订单编号</b>
                  <el-input class="w-50 m-2" placeholder="输入订单编号" v-model="data.searchData.id"
                      :prefix-icon="Search" />
              </div>
              <div class="phone">
                  <b>手机号</b>
                  <el-input class="w-50 m-2" placeholder="输入手机号" v-model="data.searchData.phone"
                      :prefix-icon="Search" />
              </div>
              <el-button type="primary" @click="searchInfo" :icon="Search">查询</el-button>
              <div class="delete-all">
                  <el-button style="width: 80px;" @click="checkDel">删除选中</el-button>
              </div>
          </div>
          <!-- 挂号列表 -->
          <div class="list">
              <el-table :data="data.tableData" :border="true" style="width: 100%" @selection-change="getCheckId">
                  <el-table-column type="selection" width="55" />
                  <el-table-column prop="id" label="订单编号" />
                  <el-table-column prop="name" label="患者姓名" />
                  <el-table-column prop="department" label="挂号科室" />
                  <el-table-column prop="further" label="是否为复诊" />
                  <el-table-column prop="48report" label="是否自我申报48小时核酸">
                      <template #default="{ row }">
                          {{ row.report === 0 ? '否' : '是' }}
                      </template>
                  </el-table-column>
                  <el-table-column label="订单操作">
                      <template #default="scope">
                          <el-button type="primary" :icon="Delete" link circle @click="openDelDialog(scope.row)" />
                          <el-button type="primary" :icon="Edit" link circle @click="openEditDialog(scope.row)" />
                      </template>
                  </el-table-column>
              </el-table>
          </div>
          <el-pagination background v-model:current-page="data.pageinfo.page" v-model:page-size="data.pageinfo.size"
              :page-sizes="[10, 50, 100, 200]" layout="total, sizes, prev, pager, next, jumper" :total="data.total" />
      </el-card>
      <!-- 删除 对话框 -->
      <el-dialog v-model="data.dialogVisible" title="系统提示" width="30%">
          <span><b>您正在进行用户挂号信息删除操作，删除后用户需要重新挂号，确定要删除吗？</b></span>
          <template #footer>
              <span class="dialog-footer">
                  <el-button type="primary" @click="delDepartment">
                      确认删除
                  </el-button>
                  <el-button @click="data.dialogVisible = false">取消</el-button>
              </span>
          </template>
      </el-dialog>
      <!-- 编辑功能 对话框 -->
      <el-dialog v-model="data.editDialog" title="挂号详情" width="30%">
          <el-form :inline="true" :model="data.editData" class="demo-form-inline">
              <el-form-item label="订单编号">
                  <el-input v-model="data.editData.id" disabled />
              </el-form-item><br>
              <el-form-item label="挂号时间">
                  <el-input v-model="data.editData.regtime" disabled />
              </el-form-item><br>
              <el-form-item label="患者姓名">
                  <el-input v-model="data.editData.name" disabled />
              </el-form-item><br>
              <el-form-item label="是否为复诊">
                  <el-input v-model="data.editData.further" disabled />
              </el-form-item><br>
              <el-form-item label="48H核酸报告">
                  <el-input v-model="data.editData['48report']" disabled />
              </el-form-item><br>
              <el-form-item label="挂号科室">
                  <el-input v-model="data.editData.department" disabled />
              </el-form-item><br>
              <el-form-item label="手机号">
                  <el-input v-model="data.editData.phone" disabled />
              </el-form-item><br>
          </el-form>
          <template #footer>
              <span class="dialog-footer">
                  <el-button type="primary" @click="data.editDialog = false">确认</el-button>
                  <el-button @click="data.editDialog = false">取消</el-button>
              </span>
          </template>
      </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { Search, Edit, Delete } from '@element-plus/icons-vue'
import { usersLogin, registerGetbyid, registerdel, registerBatchdel, registerSearch } from '../../API/register.api'
import { watchEffect, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import dayjs from "dayjs"

interface registerInfo {
  "id": number,
  "48report": number,
  "department": '',
  "further": '',
  "name": '',
  "phone": '',
  "regtime": ''
}

interface search {
  page: 1,
  size: 10,
  id: number,
  phone: string
}
const data = reactive({
  pageinfo: {
      page: 1,
      size: 10
  },
  searchData: <search>{
      page: 1,
      size: 10
  },
  tableData: [],
  total: null,
  dialogVisible: false,
  registerId: null,
  editDialog: false,
  getId: null,
  editData: <registerInfo>{}
})

//获取列表
const getList = async () => {
  const res = await usersLogin({ page: data.pageinfo.page, size: data.pageinfo.size })
  data.tableData = res.data.data
  data.total = res.data.total
  console.log(res);
}

//删除单个科室
const openDelDialog = (row) => {
  data.registerId = row.id
  data.dialogVisible = true
}

const delDepartment = async () => {
  const res = await registerdel({ id: data.registerId })
  data.dialogVisible = false
  if (res.data.code === 1) {
      ElMessage({
          message: '数据删除成功',
          type: 'success'
      })
  } else {
      ElMessage.error('数据删除失败')
  }
  getList()
  console.log(res);
}

//编辑单个科室
const openEditDialog = async (row) => {
  data.editDialog = true
  data.getId = row.id
  const res = await registerGetbyid({ id: data.getId })
  res.data.data[0].regtime = dayjs(res.data.data[0].regtime).format('YYYY-MM-DD HH:mm:ss')
  if (res.data.data[0]['48report'] === 1) {
      res.data.data[0]['48report'] = '是'
  } else {
      res.data.data[0]['48report'] = '否'
  }
  data.editData = res.data.data[0]
}

//查询挂号
const searchInfo = async () => {
  const res = await registerSearch(data.searchData)
  data.tableData = res.data.data
}

//批量删除

let checkIds = []

const getCheckId = (val) => {
  checkIds = []
  if(val){
      val.forEach(item => {
          checkIds.push(item.id)
      })
  }
}

const checkDel = async () => {
  const res = await registerBatchdel({ids:`${JSON.stringify(checkIds)}`})
  if (res.data.code === 1) {
      ElMessage.success('批量删除成功')
  } else {
      ElMessage.error('批量删除失败')
  }
  getList()
}

watchEffect(getList)

</script>

<style scoped lang="scss">
.name {
  display: flex;

  .num {
      display: flex;
      align-items: center;

      b {
          width: 100px;
      }
  }

  .phone {
      margin-left: 60px;
      display: flex;
      align-items: center;

      b {
          width: 100px;
      }
  }

  .el-button--primary {
      margin-left: 50px;
  }

  .delete-all {
      margin-left: 720px;
  }
}

.list {
  margin-top: 20px;
}

.el-pagination {
  margin-top: 20px;
}
</style>